<template>
  <div class="ui-spinner" :class="[{'is-border': border, 'is-viewable': !editable}, 'ui-spinner--' + size, 'ui-spinner--' + type]" :style="{ width: width }">
    <template v-if="editable">
      <div class="ui-spinner__control">
        <el-input-number
          v-model="innerValue"
          :precision="precision"
          :min="min"
          :max="max"
          :placeholder="placeholder"
          :disabled="disabled"
          :size="size"
          controls-position="right"
        />
      </div>
    </template>
    <template v-else>
      <div class="ui-spinner__value">
        {{innerValue}}
      </div>
    </template>
    <div class="ui-spinner__unit" v-if="unit">{{ unit }}</div>
  </div>
</template>
<script>
import ElInputNumber from 'element-ui/lib/input-number'
import 'element-ui/lib/theme-chalk/input-number.css'

export default {
  name: 'UiSpinner',
  components: {
    ElInputNumber
  },
  props: {
    border: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'simple'].includes(value)
      }
    },
    unit: {
      type: String
    },
    width: {
      type: String,
      default: '100%'
    },
    value: {
      type: [Number],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: true
    },
    max: {
      type: Number,
      default: undefined
    },
    min: {
      type: Number,
      default: undefined
    },
    size: {
      type: String,
      default: 'small'
    },
    placeholder: {
      type: String,
      default: ''
    },
    precision: {
      type: Number
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        if (val === this.value) {
          return
        }
        this.$emit('input', val)
      }
    }
  }
}
</script>
<style lang="less">
.ui-spinner {
  display: flex;
  flex-direction: row;
  align-items: center;
  .el-input-number {
    width: 100%;
    .el-input__inner{
      text-align: left;
      font-size: 14px;
    }
  }
  &:not(.is-border) {
    .el-input__inner{
      border-color: transparent;
      transition: all .25s;
      background-color: transparent;
    }
    .el-input-number__decrease,
    .el-input-number__increase{
      opacity: 0;
      border-left-color: transparent;
      background-color: #eee;
      transition: all .25s;
    }
    &:hover {
      .el-input__inner{
        border-color: #f9f9f9;
        background-color: #f9f9f9;
      }
      .el-input-number__decrease,
      .el-input-number__increase{
        opacity: 1;
      }
    }
  }
  &.is-viewable {
    &.ui-spinner--medium {
      line-height: 22px;
      padding: 9px 0;
    }
    &.ui-spinner--small {
      line-height: 22px;
      padding: 5px 0;
    }
    &.ui-spinner--mini {
      line-height: 22px;
      padding: 3px 0;
    }
  }
  &.ui-spinner--simple .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
    .el-input__inner{
      padding-left: 12px;
      padding-right: 12px;
    }
  }
}
.ui-spinner__control{
  flex: 1;
  min-width: 0;
}
.ui-spinner__unit {
  margin-left: 6px;
}
</style>
